<!--
 * @Description: 生产调整审批
 * @Author: wangwangwang
 * @Date: 2020-11-18 15:34:16
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-08 14:18:09
-->
<template>
  <div class="flows-content">
    <el-container>
      <el-main style="margin-bottom: 20px; padding: 0;">
        <el-container direction="vertical">
          <FlowHeader :isReadOnly="readOnly" @saveSubmit="handleSubmit(1)" @sendSubmit="handleSubmit(2)" @handleBackEnd="handleSubmit(3)" @handleCC="handleSubmit(4)" @handleAssign="handleSubmit(5)" @handleBackUp="handleSubmit(6)" @handleAssist="handleSubmit(7)" @handleNode="handleSubmit(8)" @handleNodeImage="handleSubmit(9)" @handleCollection="handleSubmit(10)" />
          <el-main class="info">
            <div>
              <el-input v-model="title" class="flow-title" :disabled="readOnly" placeholder="请输入流程标题"></el-input>
            </div>
            <div class="info-top">
              <div class="left">
                <span>单据号码：{{billCode}}</span>
                <span class="text">制单日期：{{billDate}}</span>
              </div>
              <div class="right">
                <span>发起人：{{applyPerson}}</span>
                <span class="text">状态：{{taskTypeText[taskStatus*1]}}</span>
              </div>
            </div>
            <div class="content">
              <div>
                <div class="form-title" style="margin-bottom:10px;">订单信息</div>
                <el-form :inline="true" :model="obj" label-width="130px">
                  <el-form-item>
                    <span slot="label">工程名称：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.engineeringName}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">浇筑部位：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.structuralParts}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">下单时间：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.createTime}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">订单提交人：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.createUserName}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">联系人：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.person}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">联系电话：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.phoneNum}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">浇筑用量：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.pouringNum}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">浇筑方式：</span>
                    <div style="width: 320px;">{{stringArr(obj.engineeringPlan.pouringMethod) }}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">浇筑时间：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.pouringTime}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">泵送高度（米）：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.pouringHigh}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">票单名称：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.noteName}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">产品名称：</span>
                    <div style="width: 320px;">{{obj.engineeringPlan.productName}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">备注：</span>
                    <div style="width: 660px;">{{obj.engineeringPlan.orderRemark}}</div>
                  </el-form-item>
                  <div class="form-title" style="margin-bottom:10px;">作业安排</div>
                  <el-form-item>
                    <span slot="label">供应站点：</span>
                    <div style="width: 320px;">{{obj.arrangement.pointName}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">结算方式：</span>
                    <div style="width: 320px;">{{obj.arrangement.settleName}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">富余量：</span>
                    <div style="width: 320px;">{{obj.arrangement.lossNum}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">前场工长：</span>
                    <div style="width: 320px;">{{obj.arrangement.foreman}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">泵送：</span>
                    <div style="width: 320px;">{{obj.arrangement.pumpingTeam}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">运输：</span>
                    <div style="width: 320px;">{{obj.arrangement.tankCar}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">泵管：</span>
                    <div style="width: 320px;">{{obj.arrangement.pipeName}}</div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">备注：</span>
                    <div style="width: 660px;">{{obj.arrangement.remark}}</div>
                  </el-form-item>
                </el-form>
                <div class="form-title" style="margin-bottom:10px;">生产调整</div>
                <div style="padding:0px 50px 0px 110px;" class="FZYxieXian">
                  <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="formTable3" tooltip-effect="dark">
                    <el-table-column align="center" width="200">
                      <template slot="header">
                        <div class="xieXian">
                          <div></div>
                          <div></div>
                          <span>时间段</span>
                          <span>生产量</span>
                          <span>生产站</span>
                        </div>
                      </template>
                      <template slot-scope="scope">
                        {{formData3TableTimeList[scope.$index].planDate}}
                      </template>
                    </el-table-column>
                    <template v-for="(item, index) in formData3TableTable">
                      <el-table-column :key="index" :label="item.foreignName" align="center">
                        <template slot-scope="scope">
                          <div>{{formTable3.find(res=>(formData3TableTimeList[scope.$index].id==res.timeId)).dataList.find(res2=>(formData3TableTable[index].id == res2.planStationId)).dataNum}}</div>
                        </template>
                      </el-table-column>
                    </template>
                    <el-table-column label="合计" align="center">
                      <template slot-scope="scope">
                        {{formTable3Total[scope.$index]}}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <div class="flows-details">
              <FlowContent ref="flowcontent" :title='title' :showSendVisible="showSendVisible" @handleCancel="handleCancel" @sendCode="sendCode" @handleFinish="handleFinish" @handleBusiness="handleBusiness" />
            </div>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import FlowContent from '@/components/WorkFlow/flowContent';
import FlowHeader from '@/components/WorkFlow/flowHeader';
import { getUserInfo } from "@/utils/auth.js";
import { check_order } from "@/api/smart/schedul/d.js";
export default {
  components: {
    FlowContent,
    FlowHeader,
  },
  data() {
    return {
      type: 0,
      title: '生产调整审批',
      billCode: '',
      billDate: '',
      applyPerson: '',
      taskTypeText: ['发起', '已保存', '审批中', '已完成', '撤销', '不通过'],
      taskStatus: 0,
      showSendVisible: false,
      readOnly: false,
      obj: {
        engineeringPlan: {
          pouringMethod: ''
        },
        arrangement: {}
      },
      list: [],
      formTable3: [],
      formData3TableTable: [],
      formData3TableTimeList: [],
      formTable3Total: [],
    }
  },
  methods: {
    handleBusiness() {
      const params = {
        process_success: {
          url: '/icps/system/sign/basics/plan/check_order',
          data: this.obj,
          httpMethod: 'post',
        },
        process_failure: ''
      }
      this.showSendVisible = false;
      this.$refs.flowcontent.handleToFlow(params);
    },
    stringArr(arr) {
      console.log(arr)
      let str
      if (arr) {
        str = JSON.parse(arr).map(res => (res.name)).join('，')
      }

      return str
    },
    /**
     * @Description: 
     * @Param: 1为保存，2为最后提交
     * @Author: wangwangwang
     * @param {*} type
     */
    handleFinish(type, status) {
      if (type === 2 && status * 1 === 2) {
        check_order(this.obj);
      }
    },
    handleSubmit(type) {
      const { query } = this.$route;
      if (query.type * 1 === 2 && type === 2 && query.taskType * 1 !== 2) { // 发起流程
        this.showSendVisible = true;
        return
      }
      const data = {
        dataSource: 'sign_smartscheduld',
        dataContent: JSON.stringify({ id: query }), // 业务数据
      }
      this.$refs.flowcontent.saveFlows(type, data);
    },
    handleFlowChat() {
      this.$refs.flowcontent.showFlowNode()
    },
    handleCancel() {
      this.showSendVisible = false;
    },
    /**
     * @Description: 回显业务数据
     * @Param: 
     * @Author: wangwangwang
     */
    initFlowsData(data) {
      this.obj = JSON.parse(data.obj)
      this.list = JSON.parse(data.list)
      this.formTable3 = JSON.parse(data.formTable3)
      this.formData3TableTable = JSON.parse(data.formData3TableTable)
      this.formData3TableTimeList = JSON.parse(data.formData3TableTimeList)
      this.formTable3Total = JSON.parse(data.formTable3Total)
      console.log(JSON.parse(JSON.stringify(this.obj)))
      const { query } = this.$route;
      if (query.type * 1 !== 1) {
        this.title = query.taskName;
      }
      this.billCode = query.receiptNumber;
      this.billDate = query.createTime;
    },
    sendCode(code) {
      this.billCode = code;
    },
  },
  created() {
    const { query } = this.$route;
    this.titlestatus = Number(query.type)
  },
  mounted() {
    const { query } = this.$route;
    if (query.type * 1 === 1) { // 发起流程
      this.initFlowsData(query);
      this.$refs.flowcontent.initBaseData('sign_smartscheduld');
      this.billDate = new Date().Format('yyyy-MM-dd hh:mm:ss');
      this.applyPerson = getUserInfo().userRealName;
      return
    }
    this.initFlowsData(JSON.parse(query.dataContent).id);
    this.readOnly = true;
    this.applyPerson = query.createUserName;
    this.taskStatus = query.taskStatus;
  }
}
</script>
<style lang="scss" scoped>
.FZYxieXian {
  .cell {
    overflow: visible;
  }
  .xieXian {
    position: relative;
    height: 40px;
    > div:nth-of-type(1) {
      position: absolute;
      top: 9px;
      left: 0;
      transform: rotateZ(24deg);
      width: 208px;
      height: 1px;
      background: #ebeef5;
    }
    > div:nth-of-type(2) {
      position: absolute;
      top: 34px;
      left: -9px;
      transform: rotateZ(9deg);
      width: 230px;
      height: 1px;
      background: #ebeef5;
    }
    > span:nth-of-type(1) {
      position: absolute;
      left: 0;
      top: 20px;
    }
    > span:nth-of-type(2) {
      position: absolute;
      left: 55px;
      top: 4px;
    }
    > span:nth-of-type(3) {
      position: absolute;
      left: 120px;
      top: -5px;
    }
  }
}
.content {
  @include discen;
  width: auto;
  .form-title {
    font-weight: 600;
    font-size: 16px;
  }
  > div {
    margin-top: 50px;
    width: 963px;
    border: 1px solid #e1e5ed;
    border-radius: 4px;
    padding: 20px;
  }
}
.flows-details {
  margin-top: 20px;
  justify-content: space-around;
}
.info {
  padding: 0 20px;
  background: #fff;
  .info-top {
    font-size: $font_size;
    color: #000000;
    @include discen_al;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px #e1e5ed solid;
    width: 100%;
    .left {
      @include discen_al;
    }
    .text {
      margin-left: 60px;
    }
  }
}
.nav_title {
  @include discen_al;
  align-items: flex-end;
  > div {
    width: 4px;
    height: 24px;
    background: $bg_color;
    margin-right: 10px;
  }
  i {
    margin-left: 5px;
  }
  color: $bg_color;
  font-size: 20px;
  font-weight: bold;
}
.dialoginfo {
  padding: 0;
}
.active {
  border-top: 1px #e1e5ed solid;
  border-right: 1px #e1e5ed solid;
  border-left: 1px #e1e5ed solid;
  background: #fff;
}
.dialoginfo-info {
  border-right: 1px #e1e5ed solid;
  border-left: 1px #e1e5ed solid;
  border-bottom: 1px #e1e5ed solid;
}
/*弹窗*/
.dialoginfo-title {
  > div {
    cursor: pointer;
  }
  height: 48px;
  display: flex;
  background: linear-gradient(
    180deg,
    rgba(250, 252, 255, 1) 0%,
    rgba(245, 247, 250, 1) 100%
  );
  .none {
    font-weight: bold;
    height: 48px;
    @include discen;
    width: calc(calc(100% - 1px) / 2);
    border-bottom: 1px solid #e1e5ed;
    > div {
      line-height: 48px;
      border-bottom: 1px rgba(0, 0, 0, 0) solid;
    }
  }
  .center {
    width: 1px;
    height: 48px;
    background: #e1e5ed;
  }
  .active {
    font-weight: bold;
    height: 48px;
    @include discen;
    width: calc(calc(100% - 1px) / 2);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    > div {
      color: $bg_color;
      line-height: 48px;
      border-bottom: 1px $bg_color solid;
    }
  }
}
.dialoginfo-info {
  padding: 10px 20px;
  overflow: auto;
  height: calc(85vh - 282px);
  .el-select,
  .el-input,
  .el-date-picker {
    width: 100%;
  }
}
.form-title {
  font-size: 18px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
</style>